<template>
    <div class="retailTerminalGoodsRankings">
        <div class="retailTerminalGoodsRankings-top">
          <van-row>
            <van-col span="12" >
              <van-button style="width:100%;background: #F7F7F7;border-radius: 0!important;"  @click="timePopup=true">{{headerTime}}<i class="iconfont icon-xia"></i></van-button>
            </van-col>
            <van-col span="12">
              <van-button style="width:100%;background: #F7F7F7;border-radius: 0!important;"  @click="sortShows=true">排序<i class="iconfont icon-xia"></i></van-button>
            </van-col>
          </van-row>

        </div>

      <div class="retailTerminalGoodsRankings-content">

        <van-list
          v-model="loading"
          :finished="finished"
          @load="getData"
        >
          <div v-if="typeof terminalRankings=='string'" style="color:#ddd;padding:20px 0;background: #fff!important;">{{terminalRankings}}</div>
          <van-row v-else style="padding:15px 0;margin:5px 0;background: #fff!important;border-radius: 3px;" v-for="(item,idx) in terminalRankings" :key="idx">
            <van-col span="6" >
              <div class="paiMing" >
                <!--排名 <span style="color:red;">{{idx+1}}</span>-->
                <img v-if="!goodList[idx].images" src="../../images/noimg.jpg" class="imgss" alt="">
                <img v-else :src="memberDetails.imgaes+goodList[idx].images" class="imgss" alt="">
              </div>
            </van-col>
            <van-col span="14">
              <van-row style="text-align: left">

                <van-col span="24" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color:#000;">
                  商品:{{goodList[idx].title}}
                </van-col>
                <van-col span="24" style="padding:8px 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                  规格: 【<span v-for="(val,key,index) in goodList[idx].spec_data" :keys="index">{{key}}:{{val}}</span>】
                </van-col>
                <van-col span="12">
                  销售数量:<span :style="{color:color}">{{item.xsnum}}</span>
                </van-col>
                <van-col span="12" >
                  <span :style="{color:color}">￥{{item.shishou}}</span>
                </van-col>
              </van-row>
            </van-col>
            <van-col span="4" class="paimings">
              <img v-if="idx==0" src="../../images/one.png" class="pmimg" alt="">
              <img v-else-if="idx==1" src="../../images/tow.png" class="pmimg" alt="">
              <img v-else-if="idx==2" src="../../images/threen.png" class="pmimg" alt="">
              <span v-else>{{idx+1}}</span>
            </van-col>
          </van-row>
          <van-row :style="{display:noData}" class="noDatas">
            <van-col span="24">数据已加载完</van-col>
          </van-row>
        </van-list>



      </div>

      <!--时间弹出层-->
      <van-popup v-model="timePopup"  @click-overlay="timePopup=false,timeRadio=timeRadioPrev" class="timeMask" style="">
        <div style="overflow: scroll;height:80%;padding-top:10px;">
          <van-radio-group v-model="timeRadio">
            <van-cell-group>
              <van-cell style="text-align: left;" v-for="(val,keys) in timeSelect" :title="val.name" :key="keys" clickable @click="timeCheckFn(val.type,val.name)">
                <van-radio :name="val.type" />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <!--按钮-->
        <van-row style="padding:10px 0;">
          <van-col span="12" style="padding:0 10px;">
            <van-button class="maskBtn" style=""  @click="timeRadio=timeRadioPrev,timePopup=false,headerTime=headerTimeprev">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button  type="primary" class="maskBtn" @click="getTsList">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>
      <!--排序弹层-->
      <van-popup v-model="sortShows"  @click-overlay="sortResults=sortResultsPrev" :overlay="true" class="paixuMask" >

        <div style="overflow: scroll;height:80%;padding-top:10px;">
          <van-radio-group v-model="sortResults">
            <van-cell-group>
              <van-cell style="text-align: left;" title="按金额" clickable @click="sortResults = '1'">
                <van-radio name="1" />
              </van-cell>
              <van-cell style="text-align: left;" title="按数量" clickable @click="sortResults = '2'">
                <van-radio name="2" />
              </van-cell>
            </van-cell-group>
          </van-radio-group>
        </div>
        <!--按钮-->
        <van-row style="padding:10px 0;">
          <van-col span="12" style="padding:0 10px;">
            <van-button  class="maskBtn"  @click="sortResults=sortResultsPrev,sortShows=false">取消</van-button>
          </van-col>
          <van-col span="12" style="padding:0 10px;">
            <van-button  type="primary" class="maskBtn"  @click="getPaiXu">确定</van-button>
          </van-col>
        </van-row>
      </van-popup>

      <div class="totals">总条数:{{total}}条</div>

      <!--返回按钮-->
      <backs></backs>

    </div>
</template>

<script>
  import backs from "@/components/menu/backPrev";
  import { mapState } from 'vuex';
    export default {
      //零售终端商品排行
        name: "retailTerminalGoodsRankings",
      components: {
        backs
      },
      computed: {
        ...mapState({
          memberDetails:"data"
        })
      },
      data(){
          return {
            color:'#0D90EB',
            headerTime:'今日',
            headerTimeprev:'今日',
            //时间弹层
            timePopup:false,
            timeRadio:"1",
            timeRadioPrev:"1",//记录上一次的选项
            timeSelect:[
              {name:"今日",type:"1"},
              {name:"本周",type:"2"},
              {name:"本月",type:"3"}
            ],
            noData:"none",
            //排序
            sortShows:false,
            sortResults:"1",
            sortResultsPrev:"1",

            //排行信息
            terminalRankings:[],
            //商品信息
            goodList:[],

            //分页
            currentPage:1,
            pageSize:10,
            pageAll:0,
            total: 0,

            loading: false,
            finished: false,
            sys:{},
            goodscode: [] //所有的商品code
          }
      },
      methods:{
        timeCheckFn(type,name){
          this.timeRadio = type
          this.headerTime = name;
        },
        //点击时间的确定按钮
        getTsList(){
          this.timePopup=false;
          this.headerTimeprev = this.headerTime
          this.timeRadioPrev=this.timeRadio;
          this.terminalRankings=[];
          this.goodList=[];
          this.noData = "none";
          this.currentPage=1;
          this.finished=false;
          this.loading=true;
          this.getData();
        },
        //点击排序的确定按钮
        getPaiXu(){
          this.sortShows=false;
          this.sortResultsPrev=this.sortResults;
          this.noData = "none";
          this.terminalRankings=[];
          this.goodList=[];
          this.currentPage=1;
          this.finished=false;
          this.loading=true;
          this.getData();
        },
        //获取数据
        getData(){
          var $this=this;
          this.$http.order.get('/saleTable/terminalGoodsSort',{
            params:{
              page:$this.currentPage,
              pageSize:$this.pageSize,
              type:$this.timeRadio,
              order:$this.sortResults
            }
          })
            .then(function (response) {
              // console.log(response.data.data)
              var empId = localStorage.getItem('empId');
              if(empId && response.data.code){
                $this.$toast.fail(response.data.message);
                $this.$router.go(-1)
                return;
              }

              $this.currentPage=response.data.data.current_page+1;
              $this.pageAll=response.data.data.last_page;
              $this.total=response.data.data.total;

              var goodsCodes=[];
              for(var i=0;i<response.data.data.data.length;i++){
                goodsCodes.push(response.data.data.data[i].code);
              }

              if(response.data.data.data.length>0){
                $this.getGoodsList(goodsCodes,response.data.data);
              }else{
                $this.loading = false;
                $this.finished = true;
                $this.terminalRankings="未找到相关数据";
                // console.log(typeof $this.terminalRankings);
              }
              // $this.getGoodsList(goodsCodes,response.data.data);
            })
            .catch(function (error) {
              $this.$toast.fail('登陆过期，请重新登陆');
              console.log(error);
            });
        },
        //获取对应的商品
        getGoodsList(codeList,goods){
          var $this=this;
          this.$http.item.get('/item/search',{
            params:{
              // item_codes:["15275919834279183"],
              item_codes:codeList,
              pagesize:20
            }
          })
            .then(function (response) {
              // console.log(goods);
              // console.log(response.data.data);
              if(response.data.data.data.length){
                // codeList
                for(var a1 = 0;a1<codeList.length;a1++){
                  for(var a2 = 0;a2<response.data.data.data.length;a2++){
                    if(codeList[a1] == response.data.data.data[a2].code){
                      $this.goodList.push(response.data.data.data[a2])
                    }
                  }
                }
              }else{
                $this.goodList.push({title:"",spec_data:[]});
              }

              for (let i = 0; i < goods.data.length; i++) {
                $this.terminalRankings.push(goods.data[i]);
              }
              $this.loading = false;

              if ($this.terminalRankings.length >= goods.total) {
                $this.finished = true;
                $this.noData = "block";
              }
              // $this.terminalRankings=goods;

              // console.log($this.goodList);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        // 获取系统设置
        getXT(){
          this.$http.setting.get('/systemsetupval').then(res => {
            // console.log(res)
            if(!res.data.code){
              let getsystem = (code) => Object.values(res.data.data).filter(item => item.code == code)[0].val;
              this.sys = {
                sys_setting_home_zdlsspphb  : getsystem('sys_setting_home_zdlsspphb'), //    是否显示：终端零售商品排行榜
                sys_setting_home_zdlsphb  : getsystem('sys_setting_home_zdlsphb'), //     是否显示：终端零售排行榜：
                sys_setting_home_dp  : getsystem('sys_setting_home_dpxsphb'), //     是否显示：店铺销售排行榜：
                sys_setting_home_sr  : getsystem('sys_setting_home_hysrtx'), //     是否显示：会员生日提醒：
                sys_setting_home_hyxztb  : getsystem('sys_setting_home_hyxztb'), //      是否显示：会员新增同比：
              }
              // console.log(this.sys)
              if(!parseInt(this.sys.sys_setting_home_zdlsspphb)){
                this.$toast.fail('系统设置中未配置！');
                this.$router.go(-1)
                return
              }
            } else if (res.data.code==900001) {
              this.$toast.fail(res.data.message);
              this.$router.go(-1)
              return
            }


          })
        }
      },
      mounted(){
        // var empId = parseInt(localStorage.getItem('empId'));
        // if(!empId){
        //   this.getXT();
        // }
        this.getXT();
        // this.getData();
        // this.getGoodsList();
      }
    }
</script>

<style scoped>
  .retailTerminalGoodsRankings{
    font-size:14px;
    color:#666;
  }
  .paiMing{
    font-size:16px;
    font-weight: bold;
  }
  .paimings{
    font-weight: bold;
    color:#39A1EF;
  }
  .paimings span{
    font-size:16px;
    line-height: 70px;
  }
  .pmimg{
    width:30px;
    height:30px;
  }
  /*弹出层的边框线*/
  .retailTerminalGoodsRankings .van-cell{
    border-bottom:1px solid #e5e5e5;
  }
  .retailTerminalGoodsRankings .van-cell:first-child{
    border-top:1px solid #e5e5e5;
  }
  .retailTerminalGoodsRankings [class*=van-hairline]::after{
    border:0;
  }

  .retailTerminalGoodsRankings-top{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    background: #fff;
    z-index: 999;
  }
  .retailTerminalGoodsRankings .van-popup{
    width:100%;
  }
  .retailTerminalGoodsRankings-content{
    margin-top:45px;
    margin-bottom:36px;
    padding: 5px;
  }
  .timeMask{
    width:320px!important;height:auto;background: #fff!important;border-radius: 5px;overflow: hidden
  }
  .maskBtn{
    width:100%;height:38px;line-height: 38px;
  }
  .paixuMask{
    width:320px!important;height:auto;background: #fff!important;border-radius: 5px;
  }
  .totals{
    width:100%;
    padding:8px 0;
    background: #fff;
    border-top: 1rpx solid #666;
    position: fixed;
    bottom:0;
    left:0;
  }
  .imgss{
    width:70%;
    height:75px;
  }

</style>
